import React, { Component } from 'react';
import { Card } from 'antd';
import { connect } from 'dva';

const namespace = 'puzzlecards';

// 这里的入参state是dva中所有state的总和，namespace作为key值获取到需要的state数据
const mapStateToProps = (state) => {
    const cardList = state[namespace].data;
    return {
        cardList,
    }
}
// 通过mapDispatchToProps和dispatch可以给组件注入方法
// 以dispatch作为参数，返回一个挂着函数的对象，这个对象上的函数会被dva并入props，注入给组件使用
const mapDispatchToProps = (dispatch) => {
    return {
        onDidMount: () => {
            dispatch({  // dispatch触发行为的方式
                type: `${namespace}/queryInitCards`
            });
        }
    }
}
// connect是连接dva和react的关键
// connect可以让组件获取到model中的数据，驱动model改变的方法
// connect是一个javascript函数，通过@装饰器语法使用
// connect可接受入参，第一个参数是函数，通常命名为mapStateToProps，就是将dva model中的state通过组件的props注入给组件
@connect(mapStateToProps, mapDispatchToProps)
export default class PuzzleCardsPage extends Component {
    componentDidMount() {
        this.props.onDidMount();
    }
    render() {
        return (
            <div>
                {
                    this.props.cardList.map(card => {
                        return (
                            <Card key={card.id} style={{ marginBottom: '10px' }}>
                                <div>Q: {card.setup}</div>
                                <div>
                                    <strong>A: {card.punchline}</strong>
                                </div>
                            </Card>
                        )
                    })
                }
            </div>
        )
    }
}